<template>
  <div class="page">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="admin-breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="headings">{{title}}</div>
    <div class="listBox">
      <!-- 按钮框 -->
      <div class="listBtnBox" style="float:left">
        <el-button type="danger" @click="del">删除</el-button>
        <router-link class="el-button el-button--primary admin-btn" to="/rules/add">添加规则</router-link>
      </div>
      <!-- 搜索 -->
      <el-form :inline="true" class="demo-form-inline" style="float:right;height:55px">
        <el-form-item label="问题">
          <el-input v-model="keyword"  placeholder="问题关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table ref="listTable"  v-loading="loading" :data="list.Items" @selection-change="SelectionChange" style="width: 100%">
        <el-table-column type="selection" width="40"/>
        <el-table-column prop="keyone" label="前截取条件"  width="200">
          <template slot-scope="scope">
            <div class="title" @click="to(scope.$index, scope.row)">{{ scope.row.keyone }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="keytwo" label="后截取条件" width="200">
           <template slot-scope="scope">
            <div class="title" @click="to(scope.$index, scope.row)">{{ scope.row.keytwo }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="reply" label="回复内容"/>
        <el-table-column prop="url" label="跳转URL" width="200"/>
        <el-table-column prop="createdate" label="创建时间" width="200"/>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="to(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
       <!-- 分页 -->
      <div class="listPage">
        <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next, jumper" :total="list.TotalItems" :page-size="list.ItemsPerPage"/>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.$route.name,
      loading:true,
      keyword: "",
      list:{
        Items:[]
      },
      Selection: []
    };
  },
  		mounted:function(){
        this.getList();
  		},
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.getList(val);
    },
    // getList
    getList(curr) {
      this.Selection = [];
      this.loading = true;
      this.$http.get("/Rule/Index", {
          params: { page: curr,KeyWord: this.keyword }
        }).then(response => {
          if (response.code == 0) {
          this.list = response.data;
          this.loading = false;
          }
        });
    },
    // 跳转
    to(index, row) {
      this.$router.push({
        path: "/rules/edit?id=" + this.list.Items[index].id
      });
    },
    // 选中
    SelectionChange(val) {
      this.Selection = [];
      for (let index = 0; index < val.length; index++) {
        this.Selection[index] = val[index].id;
      }
    },
    // 删除
    del() {
       if (this.Selection.length!=0) {
        this.$http.post( "/Rule/Delete", this.Selection).then(response => {
            if (response.code == 0) {
              this.$notify({
                title: '成功',
                message: "删除成功",
                type: "success"
              });
              this.getList();
            }
          });
      }else{
        this.$notify({
          title: '警告',
          message: '您没有勾选任何选项！',
          type: 'warning'
        });
      }
    }
  }
};
</script>

<style>
</style>